<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">	
			<news-com 
				:title="news.title" 
				:list="news.list"
				:n='1'
			></news-com>
			<news-com 
				:title="news.title"
				:n='11'
			></news-com>			
		</div>
		<script type="text/x-template" id="news2">
			<div>
				<h2>{{title}}</h2>
				<ul v-for="item in list">
					<li>{{item}}</li>
				</ul>
			</div>
		</script>

		<script>
			/*
				组件定制数据,给组件传参，传入props
				写在自定义标签作为自定义属性，写成key='value'形式
					key是子组件约定的

				动态绑定数据加上v-bind

				:title="1"  代表的是数字1
				:title="'1'"  代表的是数字1
			*/
			Vue.component('newsCom',{
				//props:['title'],  // props上的属性都会放在当前组件的实例上
				props: {
					title: {
						type: String,
						default: '这是默认值'
					},
					list: {
						type: [Array,Object],
						//required: true
						default(){  // 类型是Array/Object,默认值使用函数，返回一个对象或数组
							return []
						}
					},
					n:{
						validator(value){
							console.log(value);
							return value > 10
						}
					}
				},
				template:`#news2`
			})


			let news = {
				title: '娱乐',
				list: ['娱乐新闻1','娱乐新闻1']
			}

			// 未挂载
			let vm = new Vue({
				el:'#app',
				data: {
					message:'hello',
					news:news
				}
			});

		</script>
	</body>
</html>